<template>
  <a href="/" class="logo-wrapper">
    <img v-if="showLogo" class="logo-img" :src="logoImg" />
    <div v-if="showTitle" :class="[!appStore.isCollapse || alwaysShow ? 'show-title' : 'close-title']">
      <span class="logo-title">{{ epName }}</span>
    </div>
  </a>
</template>

<script lang="ts">
  import { computed, defineComponent } from 'vue'
  import useAppConfigStore from '@/store/modules/app-config'
  import { SideTheme, ThemeMode } from '@/store/types'
  import useUserStore from '@/store/modules/user'
  import logo from '@/assets/logo.png'
  import { projectName } from '../../setting'

  export default defineComponent({
    name: 'Logo',
    props: {
      showTitle: {
        type: Boolean,
        default: true,
      },
      showLogo: {
        type: Boolean,
        default: true,
      },
      alwaysShow: {
        type: Boolean,
        default: false,
      },
    },
    setup() {
      const appStore = useAppConfigStore()
      const userStore = useUserStore()
      // const logoImg = logo
      const logoImg = computed(() => {
        console.log('Current logo:', userStore.logo) // 调试输出
        // return userStore.logo || logo
        // 若用户上传了logo（userStore.logo），则处理路径
        if (userStore.logo) {
          // 1. 移除URL中可能存在的.png后缀
          const cleanUrl = userStore.logo.replace(/\.png$/i, '')
          // 2. 确保协议为http（覆盖可能的https）
          return cleanUrl.replace(/^https:/, 'http:')
          // return cleanUrl.replace('http:')
        }
        // 若没有上传logo，使用默认图片
        return logo
      })
      // const epName = '启程商户'
      const epName = computed(() => {
        return userStore.briefName || projectName
      })

      const bgColor = computed(() => {
        if (appStore.layoutMode !== 'ttb') {
          if (appStore.sideTheme === SideTheme.DARK) {
            return 'var(--color-menu-dark-bg)'
          }
          if (appStore.sideTheme === SideTheme.WHITE) {
            return appStore.sideTheme === SideTheme.WHITE
              ? 'var(--color-white)'
              : appStore.sideTheme === SideTheme.DARK
              ? 'var(--color-menu-dark-bg)'
              : 'transparent'
          }
          return 'transparent'
        } else {
          return appStore.theme === ThemeMode.DARK ? 'var(--color-menu-dark-bg)' : 'var(--color-white)'
        }
      })

      const handleReload = () => {
        window.location.href = '/'
      }

      return {
        appStore,
        bgColor,
        epName,
        logoImg,
        handleReload,
      }
    },
  })
</script>
<style lang="less" scoped>
  .logo-wrapper {
    height: @logoHeight;
    display: flex;
    align-items: center;
    color: var(--color-text-1);
    .logo-img {
      width: 50px;
      height: 50px;
      object-fit: contain;
      margin: 0 12px 0 16px;
      border-radius: 100%;
    }
    .logo-title {
      font-size: 20px;
      font-weight: 500;
      color: white;
      line-height: 28px;
    }
    .show-title {
      transform: scale(1);
      width: 120px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      transition: transform 0.2s ease-in;
    }
    .close-title {
      transform: scale(0);
      width: 0;
    }
  }
</style>
